<!-- Container for the artworks -->
<div class="container mb-4">
  {{- if !.IsUgoira }}
    <!-- The actual artwork itself, if not a ugoira -->
    <!-- NOTE: tried using a carousel, but doesn't really work that well -->
    {{- range index := .Images }}
      <!-- Bootstrap + Jet wizardry to dynamically scale artwork -->
      {{- if .Width != 0 && .Height != 0 }}
        <!-- Display artwork at full width (col-12) if it is a manga or in landscape orientation -->
        {* Check whether these images are part of a manga, if so, display at full width and at original resolution *}
        {{- if .IllustType == 1 }}
          <div class="row justify-content-center mb-4">
            <div class="col-12 p-0">
              <a href="{{ .Original }}" target="_blank" id="{{ index + 1 }}" class="h-100 w-100">
                <img
                  src="{{ .Original }}"
                  alt="Page {{ index + 1 }}"
                  class="img-fluid rounded h-100 w-100"
                  width="{{.Width}}"
                  height="{{.Height}}"
                />
              </a>
            </div>
          </div>
        {{- else if .Width > .Height }}
          <div class="row justify-content-center mb-4">
            <div class="col-12 p-0">
              <a href="{{ .Original }}" target="_blank" id="{{ index + 1 }}" class="h-100 w-100">
                <img
                  src="{{ .Large }}"
                  alt="Page {{ index + 1 }}"
                  class="img-fluid rounded h-100 w-100"
                  width="{{.Width}}"
                  height="{{.Height}}"
                />
              </a>
            </div>
          </div>
        <!-- Otherwise, display artwork at reduced width (col-8) if viewing on a device ≥768px in width (on small screens, the artwork is still displayed at full width) -->
        {{- else }}
          <div class="row justify-content-center mb-4">
            <div class="col-sm-12 col-md-8 p-0">
              <a href="{{ .Original }}" target="_blank" id="{{ index + 1 }}" class="h-100 w-100">
                <img
                  src="{{ .Large }}"
                  alt="Page {{ index + 1 }}"
                  class="img-fluid rounded h-100 w-100"
                  width="{{.Width}}"
                  height="{{.Height}}"
                >
              </a>
            </div>
          </div>
        {{- end }}
      {{- else }}
        <a href="{{ .Original }}" target="_blank" id="{{ index + 1 }}" class="h-100 w-100">
          <img
            src="{{ .Large }}"
            alt="Page {{ index + 1 }}"
            class="img-fluid rounded h-100 w-100"
            width="{{.Width}}"
            height="{{.Height}}"
          />
        </a>
      {{- end }}
    {{- end }}
  {{- else }}
    <!-- The actual artwork itself, if a ugoira -->
    {{- if .Images[0].Width != 0 && .Images[0].Height != 0 }}
      {{- if .Images[0].Width > .Images[0].Height }}
        <div class="row justify-content-center">
          <div class="col-12 p-0">
            <video class="w-100 rounded" autoplay loop muted disablepictureinpicture playsinline controls poster="{{ .Images[0].Large }}" src="/proxy/ugoira.com/{{ .ID }}">
              Unable to load ugoira.
            </video>
          </div>
        </div>
      {{- else }}
        <div class="row justify-content-center">
          <div class="col-sm-12 col-md-8 p-0">
            <video class="w-100 rounded" autoplay loop muted disablepictureinpicture playsinline controls poster="{{ .Images[0].Large }}" src="/proxy/ugoira.com/{{ .ID }}">
              Unable to load ugoira.
            </video>
          </div>
        </div>
      {{- end }}
    {{- else }}
      <div class="row justify-content-center">
        <div class="col-12 p-0">
          <video class="w-100 rounded" autoplay loop muted disablepictureinpicture playsinline controls poster="{{ .Images[0].Large }}" src="/proxy/ugoira.com/{{ .ID }}">
            Unable to load ugoira.
          </video>
        </div>
      </div>
    {{- end }}
  {{- end }}
</div>

  <!-- Artwork title and user information -->
  <div class="custom-card bg-charcoal-surface1 mb-4">
    <div class="card-body rounded-5 p-4">
      <div class="row mb-3">
        <!-- Artist avatar, artwork name, and artist name -->
        <div class="col-12 col-xl-8 mb-3 mb-xl-0">
          <div class="d-flex align-items-center">
            <a href="/users/{{ .User.ID }}" class="me-3">
              <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle object-fit-cover" style="width: 64px; height: 64px;"/>
            </a>
            <div>
              <h1 class="mb-2">{{ .Title }}</h1>
              <h3 class="mb-0"><a href="/users/{{ .User.ID }}" class="text-muted text-decoration-none">{{ .User.Name }}</a></h3>
            </div>
          </div>
        </div>

        <!-- Bookmark and like buttons -->
        <!-- NOTE: hx-push-url used to update the URL in the user's address bar correctly, otherwise pressing back will return the user one level further than intended -->
        <div class="col-12 col-xl-4 d-flex justify-content-start justify-content-xl-end align-items-start pt-2">
          {{- if isset(.BookmarkData) && LoggedIn }}
          <button
            type="button"
            class="custom-btn-secondary text-nowrap me-2"
            hx-post="/self/deleteBookmark/{{ .BookmarkID }}"
            hx-target="body"
            hx-swap="innerHTML"
            hx-indicator="#bookmark-spinner"
            hx-push-url="true"
          >
            <div class="d-flex">
              <div class="bookmark-text"><i class="bi bi-heart-fill me-2"></i>Bookmarked</div>
              <div class="bookmark-spinner ms-2" id="bookmark-spinner">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
            </div>
          </button>
          {{- else }}
          <button
            type="button"
            class="custom-btn-secondary text-nowrap me-2"
            hx-post="/self/addBookmark/{{ .ID }}"
            hx-target="body"
            hx-swap="innerHTML"
            hx-indicator="#bookmark-spinner"
            hx-push-url="true"
          >
          <div class="d-flex">
            <div class="bookmark-text"><i class="bi bi-heart me-2"></i>Bookmark</div>
            <div class="bookmark-spinner ms-2" id="bookmark-spinner">
              <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>
          </button>
          {{- end }}

          {{- if .Liked && LoggedIn}}
          <!-- NOTE: /self/unlike isn't a real URI path, just keeping it here for consistency -->
          <button
            type="button"
            class="custom-btn-secondary text-nowrap"
            hx-post="/self/unlike/{{ .ID }}"
            hx-target="body"
            hx-swap="innerHTML"
            hx-indicator="#like-spinner"
            hx-push-url="true"
            disabled
          >
            <div class="d-flex">
              <div class="like-text"><i class="bi bi-hand-thumbs-up-fill me-2"></i>Liked</div>
              <div class="like-spinner ms-2" id="like-spinner">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
            </div>
          </button>
          {{- else }}
          <button
            ype="button"
            class="custom-btn-secondary text-nowrap"
            hx-post="/self/like/{{ .ID }}"
            hx-target="body"
            hx-swap="innerHTML"
            hx-indicator="#like-spinner"
            hx-push-url="true"
          >
            <div class="d-flex">
              <div class="like-text"><i class="bi bi-hand-thumbs-up me-2"></i>Like</div>
              <div class="like-spinner ms-2" id="like-spinner">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
            </div>
          </button>
          {{- end }}
        </div>
      </div>

      <!-- View Pixiv original button -->
      <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 mb-3">
        <small class="text-center">
          <i class="bi bi-box-arrow-up-right me-1"></i>
          <a href="https://pixiv.net/i/{{ .ID }}" class="text-body-secondary fw-semibold">
            View on pixiv.net
          </a>
        </small>
      </div>

      <!-- Artwork description -->
      <!-- Rendered conditionally to avoid a weird empty p element that messes with spacing -->
      {{- if .Description }}
      <p class="mb-3">{{- raw: parsePixivRedirect(.Description) }}</p>
      {{- end }}

      <!-- Tag information -->
      <!-- text-start ensures that the content within non-emphasized tags is left-aligned while still maintaining proper wrapping behavior -->
      <div class="d-flex flex-wrap align-items-baseline mb-3">
        {{- if .AiType == 2 }}
        <span class="badge bg-warning text-dark mb-2 me-2">AI-generated</span>
        {{- end }}
        {{- range .Tags }}
          {* NOTE: early block to catch the R-18 tag *}
          {{- if isEmphasize(.Name) }}
          <span class="badge bg-danger mb-2 me-2">{{ .Name }}</span>
          {{- end }}
        {{- end }}
        {{- range .Tags }}
          {{- if isEmphasize(.Name) }}
          {* Intentionally empty to not render anything to avoid duplication *}
          {{- else }}
          {* NOTE: tried styling these tags similarly to the "View on pixiv.net" button, but even then they still draw too much attention and break visual hierarchy *}
          <div class="d-inline-block mb-2 me-2">
            <small>
            <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-wrap p-0 mb-0">#{{ .Name }}</a>
            {{- if .TranslatedName }}
            {* NOTE: the .TranslatedName actually has a surprisingly high contrast ratio at 7.18 here; also nesting small tags is cursed but it works *}
            <small class="text-body-secondary fw-medium">({{ .TranslatedName }})</small>
            {{- end }}
            </small>
          </div>
          {{- end }}
        {{- end }}
      </div>

      <!-- Other artwork information (views, bookmarks, likes, creation date) -->
      <div class="d-flex flex-wrap text-muted small me-2">
        <div class="me-3 mb-2 mb-lg-0">
            <i class="bi bi-eye me-2"></i>{{- .Views }}
        </div>
        <div class="me-3 mb-2 mb-lg-0">
            <i class="bi bi-heart me-2"></i>{{- .Bookmarks }}
        </div>
        <div class="me-3 mb-2 mb-lg-0">
            <i class="bi bi-hand-thumbs-up me-2"></i>{{- .Likes }}
        </div>
        <div class="me-3 mb-2 mb-lg-0">
            <i class="bi bi-calendar me-2"></i>{{- parseTime: .Date }}
        </div>
        {{- if .Images[0].Width != 0 && .Images[0].Height != 0 }}
        <div>
            <i class="bi bi-arrows-angle-expand me-2"></i>{{ .Images[0].Width }}x{{ .Images[0].Height }}
        </div>
        {{- end }}
      </div>
    </div>
  </div>
